@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family: 'Inter', sans-serif;
  }
}

@layer components {
  .tech-input {
    @apply bg-gray-800 border border-gray-700 focus:border-cyber-cyan-500 focus:ring-1 focus:ring-cyber-cyan-500 text-gray-100 rounded-md px-4 py-2 outline-none transition-all duration-300 w-full;
  }
  
  .tech-button {
    @apply bg-tech-blue-600 hover:bg-tech-blue-700 text-white font-medium py-2 px-4 rounded-md transition-all duration-300 flex items-center justify-center gap-2 border border-tech-blue-500 hover:border-tech-blue-400 focus:outline-none focus:ring-2 focus:ring-cyber-cyan-500 focus:ring-opacity-50;
  }
  
  .tech-button-outline {
    @apply bg-transparent border border-tech-blue-500 text-tech-blue-500 hover:bg-tech-blue-500/10 font-medium py-2 px-4 rounded-md transition-all duration-300 flex items-center justify-center gap-2 focus:outline-none focus:ring-2 focus:ring-cyber-cyan-500 focus:ring-opacity-50;
  }
  
  .tech-card {
    @apply bg-gray-800/80 backdrop-blur-sm border border-gray-700 rounded-lg shadow-lg overflow-hidden;
  }
  
  .tech-panel {
    @apply bg-gray-800/90 backdrop-blur-sm border border-gray-700 rounded-lg p-4;
  }
  
  .tech-scrollbar {
    @apply scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-800;
  }
  
  .glow-border {
    @apply border border-cyber-cyan-500 shadow-glow;
  }
  
  .glow-text {
    @apply text-cyber-cyan-400 drop-shadow-[0_0_8px_rgba(0,255,235,0.7)];
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}

/* Animations */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
